<template>
  <div class="my-cropper">
    <el-dialog v-model="show" title="编辑图片" @close="show = false">
      <VueCropper :img="img" ref="cropper" :outputSize="1" outputType="png" :info="true" :full="false" :fixed="true"
        :fixedBox="true" :original="true" :autoCrop="true" :autoCropWidth="200" :autoCropHeight="200">
      </VueCropper>
      <div class="blank"></div>
      <el-button @click="onCrop">确认</el-button>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { useTemplateRef, watch } from "vue";
import { ElDialog, ElButton } from "element-plus";
import { ref } from "vue";
import { VueCropper } from "vue-cropper";
interface prop {
  img?: string;
}
const props = defineProps<prop>();
const cropper = useTemplateRef("cropper");
const show = ref(false);
watch(
  () => props.img,
  (val) => {
    if (val) {
      show.value = !show.value;
    }
  },
);
const emits = defineEmits(["update:img"]);
const onCrop = () => {
  //@ts-ignore
  cropper.value?.getCropBlob((blob: Blob) => {
    const file = new File([blob], "1.png", { type: blob.type });
    const url = URL.createObjectURL(file);
    emits("update:img", url);
  });
};
</script>
<style scoped>
.my-cropper :deep(.vue-cropper) {
  height: 300px;
}
</style>
